import { ScrollView, View, Text, Image, Button } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import moment from 'dayjs';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui';
import 'taro-ui/dist/style/components/modal.scss';
import banner from '@/assets/image/myPost/banner.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
    };
  }

  componentDidMount() {
    this.props.actions.init();
  }

  componentDidShow() { }

  componentWillUnmount() { }

  addClick() {
    this.setState({
      isShow: true,
    });
  }

  handleCancel() {
    this.setState({
      isShow: false,
    });
  }
  handleConfirm() {
    this.setState({
      isShow: false,
    });
    this.props.actions.action.addRegister();
  }

  imgRender(image) {
    const imgList = [];
    if (image && image.length > 0) {
      image.map((item, index) => {
        imgList.push(
          <Image
            key={index}
            src={item.imageUrl}
            style={{
              width: '60%',
              height: '100%',
              borderRadius: '20rpx',
            }}
          />,
        );
      });
    }
    return imgList;
  }

  render() {
    let {
      main: { detail },
      actions: { action },
    } = this.props;
    let { isShow } = this.state;
    let firstimg = '';
    if (detail.refImage != undefined && detail.refImage.length != 0) {
      firstimg = detail.refImage[0].imageUrl;
    }
    return (
      <View style={{ flex: 1, backgroundColor: '#fff', position: 'relative' }}>
        {JSON.stringify(detail) !== '{}' ? (
          <View>
            {detail.refImage != undefined && detail.refImage.length != 0 ? (
              <Image style={{ width: '100%', height: '337rpx' }} src={firstimg} />
            ) : (
              <Image style={{ width: '100%', height: '337rpx' }} src={banner} />
            )}
            <View
              style={{
                width: '100%',
                height: '70rpx',
                borderTopRightRadius: '60rpx',
                borderTopLeftRadius: '60rpx',
                position: 'absolute',
                zIndex: 99,
                top: '270rpx',
                backgroundColor: '#fff',
              }}
            ></View>
          </View>
        ) : null}
        <ScrollView scrollY>
          {JSON.stringify(detail) !== '{}' ? (
            <View style={{}}>
              <View
                className="activenfo"
                style={{
                  backgroundColor: '#fff',
                  width: '100%',
                  textAlign: 'left',
                  flex: 1,
                  flexDirection: 'column',
                }}
              >
                <Text className="title">{detail.title}</Text>
                <View className="m_box">
                  <Text className="plot">
                    发起人：
                    {detail.sponsor}
                  </Text>
                  <Text className="plot">
                    报名截止时间：
                    {moment(detail.enrollEndDate).format('YYYY-MM-DD HH:mm:ss')}
                  </Text>
                  <Text className="plot">
                    活动时间：
                    {moment(detail.startDate).format('YYYY-MM-DD HH:mm:ss')}~
                    {moment(detail.endDate).format('YYYY-MM-DD HH:mm:ss')}
                  </Text>
                  <Text className="plot">
                    人数限制：
                    {detail.mostPeople}人
                  </Text>
                </View>
                <View className="contentBox">
                  <View
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      flexWrap: 'nowrap',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      paddingLeft: '30rpx',
                      paddingRight: '30rpx',
                    }}
                  >
                    <View
                      style={{
                        width: '28vw',
                        borderWidth: '1rpx',
                        borderStyle: 'solid',
                        borderColor: '#D8D8D8',
                      }}
                    ></View>
                    <View style={{ height: '18px', fontSize: '22rpx' }}>
                      <Text style={{ fontSize: '12px', color: '#D8D8D8' }}>活动内容说明</Text>
                    </View>
                    <View
                      style={{
                        width: '28vw',
                        borderWidth: '1rpx',
                        borderStyle: 'solid',
                        borderColor: '#D8D8D8',
                      }}
                    ></View>
                  </View>
                  <View>
                    <Text className="content">{detail.content}</Text>
                  </View>
                </View>
              </View>
              <View></View>
            </View>
          ) : null}
          <View
            style={{
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '20rpx',
            }}
          >
            {this.imgRender(detail.refImage)}
          </View>
        </ScrollView>
        {JSON.stringify(detail) !== '{}' ? (
          <View className="bottom">
            <Text
              style={{
                height: '100rpx',
                lineHeight: '100rpx',
                fontSize: '22rpx',
              }}
            >
              已报名：
              <Text
                style={{
                  color: '#789FF6',
                  fontSize: '26rpx',
                }}
              >
                {detail.signUpNum}人
              </Text>
            </Text>
            <View
              onClick={() => {
                !detail.signIn && detail.status == 1 && detail.mostPeople - detail.signUpNum != 0
                  ? this.addClick(detail.id)
                  : null;
              }}
              style={{
                backgroundColor:
                  detail.status == 0 || detail.status == -1 || detail.signIn == 1 || detail.status == 4
                    ? '#cccc'
                    : '#789FF6',
                height: '60rpx',
                width: '30%',
                borderRadius: '10rpx',
                margin: '20rpx',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {detail.status == 0 ? (
                <Text style={{ color: '#fff' }}>未开始 </Text>
              ) : detail.status == 2 ? (
                <Text style={{ color: '#fff' }}>报名结束 </Text>
              ) : detail.status == 3 ? (
                <Text style={{ color: '#fff' }}>活动中 </Text>
              ) : detail.status == 4 ? (
                <Text style={{ color: '#fff' }}>活动结束 </Text>
              ) : (
                <Text
                  style={{
                    color: '#fff',
                    fontSize: '32rpx',
                    lineHeight: '38rpx',
                  }}
                >
                  {detail.mostPeople - detail.signUpNum == 0
                    ? '报名人数已满'
                    : detail.signIn == 1 //0未报名1已报名
                      ? '已报名'
                      : '立即报名'}
                </Text>
              )}
            </View>
          </View>
        ) : null}

        {/* 报名弹窗 */}
        <AtModal isOpened={isShow}>
          <AtModalContent>
            <View className="modalTitle">温馨提示</View>
            <View className="modalContent"> 报名后无法取消，是否确认报名?</View>
            <View className="modalBtn">
              <Button
                onClick={() => {
                  this.setState({
                    isShow: false,
                  });
                }}
              >
                取消
              </Button>
              <Button
                onClick={() => {
                  this.handleConfirm();
                }}
              >
                确定
              </Button>
            </View>
          </AtModalContent>
        </AtModal>
      </View>
    );
  }
}
